/**
 * @description seed-form-select 输入框
 * 在对应的 ts 里 建立 formGroup 添加对应的控制器 control
 * 在html的form表单里需要加上 ngDefaultControl 才能被识别为 form 的 control
 *
 * @author ouxh862
 * @Input() arr: Array<string | object>; 选择框的选项数组
 * @Input() defaultValue: number; 默认选中值
 * @Input() optionsText: string; 如果选项数组里是 key:value 形式则制定 选项显示值 的 取值
 * @Input() optionsValue: string; 如果选项数组里是 key:value 形式则制定 绑定的 value 的 key 取值
 * @Input() title: string; 自定义项的名称
 * @Input() placeholder: string; 默认显示值
 * @Input() needBlur;  // 提示语句需要失焦点在显示
 * @Input() defaultValue: string; 默认值
 * @Output() valueChange: EventEmitter<string> 值改变时候事件
 * @Output() onBlur: true 失焦事件
 *
 * 如果需要错误提示，可以在标签里面添加
 * example:  （可参考seed-form-base）
 * html:
 * <seed-form-select
   [defaultValue]="defaultValue"
   (valueChange)="change($event)"
   [title]="title"
   (onBlur)="onblur()" [arr]="selectValue">
   <p class="error-tip" *ngIf="!signForm.controls['sex'].valid">请选择性别</p>
 </seed-form-select>
 */

import {Component, OnInit, ViewEncapsulation, Input, Output,
  EventEmitter, OnDestroy} from '@angular/core';
import {ToolsService} from "@shared/service/tools/tools.service";
import {FormControl} from "@angular/forms";
import {Subject} from "rxjs/Subject";

// import 'rxjs/add/operator/takeUntil';

@Component({
  selector: 'seed-form-select',
  templateUrl: './form-select.component.html',
  styleUrls: ['./form-select.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class FormSelectComponent implements OnInit , OnDestroy{
  // public value = `请选择`;
  private _arr: any;
  public valueHasChange = false;
  public selectBlur = false;
  public selectValue: FormControl = new FormControl();
  private _optionsText = '';
  private _optionsValue = '';

  @Input()
  set arr(arrValue) {
    this._arr = arrValue;
  };

  get arr() {
    return this._arr;
  }

  @Input()
  set defaultValue(val) {
    if (val !== '') {
      this.valueHasChange = true;
    }
    this.selectValue.setValue(val);
    // this.value = val;
  };

  get defaultValue() {
    return this.selectValue.value;
  }

  @Input()
  set optionsText(val) {
    this._optionsText = val;
  }

  get optionsText() {
    return this._optionsText;
  }

  @Input()
  set optionsValue(val) {
    this._optionsValue = val;
  }

  get optionsValue() {
    return this._optionsValue;
  }
  @Input() needBlur;  // 提示语句需要失焦点在显示

  @Input() title: string;
  @Input() placeHolder: string;
  @Output() valueChange: EventEmitter<any> = new EventEmitter();
  @Output() onBlur: EventEmitter<any> = new EventEmitter();
  private ngUnsubscribe: Subject<any> = new Subject<any>();

  constructor(private tools: ToolsService) {
    this.needBlur = true;
    this.arr = [];
  }

  ngOnInit() {
    this.selectValue.valueChanges.takeUntil(this.ngUnsubscribe).subscribe(res => {
      this.valueHasChange = true;
      this.valueChange.emit(this.selectValue.value);
    });
  }

  selectClick() {
    if (this.valueHasChange) {
      return;
    }
    if (this.tools.ua().isIos) {
      const val = this.optionsValue ? this.arr[0][this.optionsValue] : this.arr[0];
      this.selectValue.setValue(val);
      this.valueHasChange = true;
      this.valueChange.emit(this.selectValue.value);
    }
  }

  // change(){
  //   this.valueHasChange = true;
  //   this.valueChange.emit(this.selectValue.value);
  // }

  inputOnBlur() {
    this.selectBlur = true;
    this.onBlur.emit(true);
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}
